<template>
  <div>
    <section class="nav-auction">
      <ul>
        <li :class="isShowSuccess==1? 'active':''"
            @click="changeTab(1)">我报名的</li>
        <li :class="isShowSuccess==2? 'active':''"
            @click="changeTab(2)">我胜出的</li>
      </ul>
    </section>
    <section class="goods">
      <ul v-if="lists.length>0">
        <van-list v-model="loading"
                  :finished="finished"
                  :error.sync="error"
                  error-text="请求失败，点击重新加载"
                  finished-text=""
                  @load="loadMore">
          <li v-for="(item, index) in lists"
              :key="index">
            <div class="goods-info">
              <section class="good-img">
                <a  @click="Jump('detailAuction',{id:item.item_auction_id})">
                  <img v-if="item.is_compress"
                       :src="item.pic_url+'180x180'"
                       width="80"
                       heigth="80">
                  <img v-else
                       :src="item.pic_url"
                       width="80"
                       heigth="80">
                </a>
              </section>
              <section class="goods-detail">
                <a @click="Jump('detailAuction',{id:item.item_auction_id})">
                  <p class="title">{{item.item_title}}</p>
                </a>
                <p class="auction-info"><span>竞拍轮次：</span><span v-if="isShowSuccess==2"><span class="red">第<i>{{item.turn}}</i>轮</span> / </span>共<i>{{item.active_turn}}</i>轮</p>
                <p class="price-info"><span class="price-info-txt">保证金：</span><span class="price" v-html="scaleGoodsPriceFn(item.deposit)"></span></p>
              </section>
              <van-button v-if="isShowSuccess==1"
                          class="auction-btn-info"
                          @click="showdeposit(item.deposit,item.pay_time)"
                          color="#F20B22"
                          plain hairline round>保证金</van-button>
              <van-button v-else
                          class="auction-btn-info"
                          color="#F20B22"
                          plain hairline round>{{item.status_info}}</van-button>
            </div>
            <!-- 我胜出时展示 -->
            <div v-if="isShowSuccess==2 && item.status_zt==0 "
                 class="auction-info-handle">
              <span v-if="item.status == 3"
                    class="pay-retainage">支付截止时间：{{item.pay_end_time}}</span>
              <van-button v-if="item.status == 3"
                          class="pay_info"
                          @click="Jump('payAuction',{id:item.auction_turn_id})"
                          color="#F20B22"
                          plain hairline round>待付款</van-button>
              <van-button v-else
                          class="pay_info"
                          @click="Jump('payAuction',{id:item.auction_turn_id})"
                          color="#F20B22"
                          plain hairline round>详情</van-button>
              <van-button v-if="item.order_status == 2"
                          class="pay_info"
                          @click="showconfirm(item.auction_order_id)"
                          color="linear-gradient(to right, #FF2D59, #F82337)"
                          round>确认收货</van-button>
            </div>
          </li>
        </van-list>

      </ul>
      <div v-else>
        <no-data :noData="noData"></no-data>
      </div>
    </section>
    <!-- 保证金弹框 -->
    <van-dialog
      v-model="isShowdeposit"
      :show-confirm-button="false"
      close-on-click-overlay
      class="common-confirm deposit-box-dialog"
      @close="hidedeposit"
    >
       <div class="deposit-box-close" @confirm="hidedeposit"></div>
       <div class="deposit-box">
        <p>
          <span class="label">保证金：</span>
          <span class="price">
            <em>&yen;</em>{{deposit}}
          </span>
        </p>
        <p>
          <span class="label">支付时间：</span>
          <span class="time">{{time}}</span>
        </p>
        <p>
          <span class="label">支付状态：</span>
          <span class="status">{{status}}</span>
        </p>
      </div>
    </van-dialog>

    <!-- 确认收货 -->
    <van-dialog
      v-model="isShowConfirm"
      title="确认收货？"
      show-cancel-button
      close-on-click-overlay
			@confirm="confirmbtn"
      class="common-confirm"
      @close="hideConfirm"
    >
    </van-dialog>
  </div>
</template>

<script>
import { getMyAuction, getComfrimOrder } from '@/api/activity/activityApi'
import { scaleGoodsPrice } from '@/utils/index.js'
import noData from '@/components/noData/index'
import Vue from 'vue'

export default Vue.extend({
  components: {
    noData
  },
  data() {
    return {
      noData: {
        width: '184px',
        marginTop: '80px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_paimai.png',
        text: '暂无商品'
      },
      loading: false,
      finished: false,
      error: false,
      lists: [],
      isShowSuccess: 1,
      p: 2,
      time: '',
      deposit: '',
      status: '',
      isShowdeposit: false,
      isShowConfirm: false,
      id: ''
    }
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    init() {
      const data = {
        type: this.isShowSuccess
      }
      this.$loadingWrap.show()
      getMyAuction(data).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (this.isShowSuccess == 1) {
            this.lists = res.data.lists
          } else {
            this.lists = res.data.turn_lists
          }
          if (!this.lists.length) {
            this.finished = true
          }
        } else {
          this.$Error(res.mag)
        }
      })
    },
    // 确认收货
    hideConfirm() {
      this.isShowConfirm = false
    },
    showconfirm(id) {
      this.id = id
      this.isShowConfirm = true
    },
    confirmbtn() {
      const data = {
        id: this.id
      }
      getComfrimOrder(data).then((res) => {
        this.hideConfirm()
        if (res.status == 1) {
          this.init()
          this.$Error(res.data.msg)
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 保证金弹框
    showdeposit(deposit, time) {
      this.isShowdeposit = true
      this.deposit = deposit
      this.time = time.slice(0, 19)
      this.status = time.slice(19)
    },
    hidedeposit() {
      this.isShowdeposit = false
    },

    // 切换类型
    changeTab(index) {
      if (this.isShowSuccess == index) return false
      this.isShowSuccess = index
      this.p = 2
      this.finished = false
      this.init()
    },

    Jump(url, data) {
      // console.log(url)
      this.$JumpPath(this, url, data)
    },

    JumpUrl(url, data) {
      // console.log(url)
      window.location.href = `${url}?id=${data.id}`
    },
    loadMore() {
      const data = {
        type: this.isShowSuccess,
        p: this.p
      }
      getMyAuction(data).then((res) => {
        this.loading = false
        if (res.data.length) {
          this.lists = this.lists.concat(res.data)
          this.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    }
  },
  created() {
    this.init()
  }
})
</script>

<style lang="scss">
@import "../../../../styles/mixin";
.nav-auction {
  width: 100%;
  background: #fff;
  border-radius: 0 0 20px 20px;
  ul {
    overflow: hidden;
  }
  li {
    width: 50%;
    line-height: 103px;
    color: #333;
    font-size: 28px;
    text-align: center;
    float: left;
    position: relative;
    &.active {
      font-weight: bold;
      &::before {
        content: "";
        position: absolute;
        bottom: 16px;
        left: 50%;
        @include translate(-50%, 0);
        width: 56px;
        height: 5px;
        @include gradient(right,rgba(242,11,34,1),rgba(242,11,34,0.1));
      }
    }
  }
}
.goods {
  width: 100%;
  ul {
    padding: 0 25px;
    li {
      overflow: hidden;
      background: #fff;
      margin-top: 20px;
      padding: 25px;
      border-radius: 20px;
      .goods-info {
        position: relative;
        .good-img {
          width: 160px;
          height: 160px;
          overflow: hidden;
          position: absolute;
          img {
            border-radius: 10px;
            display: block;
            width: 100%;
          }
        }
        .goods-detail {
          margin-left: 175px;
          overflow: hidden;
          height: 160px;
          position: relative;
          .title {
            color: #333333;
            margin-bottom: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
            @include lineClamp(24px, 30px, 2);
            height: 60px;
          }
          .price-info {
            .price-info-txt {
              color: #666;
            }
          }
          .auction-info {
            color: #666666;
            margin: 15px 0 20px;
            span {
              color: #666;
              &.red{
                color:#F30C23;
              }
            }
          }
        }
        .auction-btn-info {
          position: absolute;
          bottom: 0;
          right: 0;
          height: 52px;
          padding: 0 16px;
          font-size: 22px;
        }
      }
      .auction-info-handle {
        border-top: 1px solid #EDEDED;
        padding-top: 20px;
        margin-top: 20px;
        overflow: hidden;

        span.pay-retainage {
          line-height: 48px;
        }
        .pay_info {
          display: block;
          float: right;
          width: 117px;
          height: 48px;
          margin-left: 10px;
          font-size: 22px;
        }
      }
    }
  }
}
.deposit-box-dialog{
  .deposit-box-close{
    position:absolute;
    top:30px;
    right:30px;
    width:28px;
    height:28px;
    background:url("https://img.wifenxiao.com/h5-wfx/images/user/icon_del.png") no-repeat;
    background-size:100% 100%;
  }
}
.deposit-box {
  padding: 60px 60px;
  p {
    font-size: 28px;
    line-height: 60px;
    color: #666;
    display:flex;
    .price {
      font-weight:bold;
      color: #F21228;
      em{
        font-weight:bold;
      }
    }
    .label{
      display:inline-block;
      width:140px;
      font-size:26px;
      text-align:right;
    }
    .time {
      color: #333;
    }
    .status {
      color: #48A72E;
    }
  }
  i.close {
    position: absolute;
    left: 50%;
    bottom: -160px;
    @include translate(-50%, 0);
    font-size: 40px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    border-radius: 50%;
    border: 2px solid #ffffff;
  }
  .confirm-des {
    font-size: 36px;
    color: #911a1a;
    text-align: center;
  }
  .btn {
    margin-top: 20px;
    i {
      display: inline-block;
      width: 184px;
      height: 70px;
      line-height: 70px;
      box-sizing: border-box;
      text-align: center;
      border-radius: 35px;
      margin: 0 15px;
      &.confirm-btn {
        color: #fff;
        @include gradient(top, #ff7b19, #ff5400);
      }
      &.cancel-btn {
        color: #ff6d00;
        border: 2px solid #ff6d00;
      }
    }
  }
}
.shade {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 12;
  top: 0px;
  left: 0px;
}
.pay_box {
  display: none;
  width: 80%;
  min-height: 210px;
  height: 210px;
  border-radius: 6px;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 13;
  margin: auto;
  overflow: hidden;
  .box_top {
    height: 60px;
    width: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 16px;
    color: #fff;
    background-size: 100% auto;
  }
  .box_content {
    padding: 5px 15px;
    .price {
      padding: 10px 0;
      color: #df3536;
      background: #fff0db;
      font-size: 17px;
      text-align: center;
      border-radius: 4px;
    }
    .button_pay {
      width: 100%;
      margin-top: 13px;
      text-align: center;
      p {
        width: calc(30% - 11px);
        padding: 8px 25px;
        color: #999;
        background: #e7e7e7;
        border-radius: 4px;
        display: inline-block;
        text-align: center;
        font-size: 16px;
      }
      .btn-cancal {
        margin-right: 8px;
      }
      .btn-affirm {
        background: #df3536;
        color: #fff;
      }
    }
  }
}
</style>
